<script setup lang="ts">
import { ref } from 'vue'
import { navigateToUrl } from 'single-spa'
import { useStore } from 'stores/store'
// import { useRoute, useRouter } from 'vue-router'
import { i18n } from 'boot/i18n'

// const props = defineProps({
//   foo: {
//     type: String,
//     required: false,
//     default: ''
//   }
// })
// const emits = defineEmits(['change', 'delete'])

const { tc } = i18n.global
const store = useStore()
// const route = useRoute()
// const router = useRouter()

// const fabButton = ref(false)
const activeTab = ref(store.items.currentPath[1]) // keep selection when reloading

const appPath = process.env.appPath as string

</script>

<template>
  <div class="LinkManage">
    <q-scroll-area style="height: calc(100vh - 60px);">
      <div class="column">

        <!--      <div class="col-auto">-->
        <!--        <div class="row justify-center">-->
        <!--          <global-header-content class="content-fixed-width"/>-->
        <!--        </div>-->
        <!--      </div>-->

        <!--      <q-separator/>-->

        <div class="col-auto">
          <div class="row justify-center">
            <div class="content-fixed-width">
              <div class="row items-center q-pt-lg q-gutter-md">

                <div class="col-auto text-h6 ">
                  {{ tc('应用信息') }}
                </div>

              </div>

              <div class="row">
                <div class="col">

                  <q-tabs
                    v-model="activeTab"
                    indicator-color="primary"
                    active-color="primary"
                    align="left"
                    inline-label
                  >
                    <q-tab
                      no-caps
                      class="q-px-none q-py-md q-mr-md"
                      name="about"
                      icon="format_list_bulleted"
                      :label="tc('关于')"
                      :ripple="false"
                      @click="navigateToUrl(appPath + '/info/about')"
                    />

                    <!--                    <q-tab-->
                    <!--                        no-caps-->
                    <!--                        class="q-px-none q-py-md q-mr-md"-->
                    <!--                        name="log"-->
                    <!--                        icon="business"-->
                    <!--                        :label="tc('错误日志')"-->
                    <!--                        :ripple="false"-->
                    <!--                        @click="navigateToUrl(appPath + '/info/log')"-->
                    <!--                    />-->

                  </q-tabs>

                </div>
              </div>
            </div>

          </div>
        </div>

        <q-separator/>

        <!--      <q-scroll-area style="height: calc(100vh - 300px); width: 1720px;" visible>-->

        <div class="col-auto q-pt-xl">
          <div class="row justify-center">
            <!--          <div class="col"/>-->
            <!--          <div class="col-xs-12 col-md-10">-->
            <router-view class="content-fixed-width"/>
            <!--          </div>-->
            <!--          <div class="col"/>-->
          </div>
        </div>

        <!--      </q-scroll-area>-->

      </div>
    </q-scroll-area>
  </div>
</template>

<style lang="scss" scoped>
</style>
